<template>
  <WidgetBase ref="root" class="fa-widget-date-sign" :data="data" :menu="menu">
    <div v-if="!data.isSet && data.signImage" class="fa-widget-date-sign__img-box">
      <SignImg
        class="fa-widget-date-sign__img"
        :style="{ width: `${data.w}px` }"
        :type="type"
        :data="{ img: data.signImage }"
      />
    </div>

    <WidgetPlaceholder v-else-if="!data.isDone" :data="data" />
  </WidgetBase>
</template>

<script lang="ts">
import { computed, defineComponent, inject, ref } from 'vue'
import { Widget } from '@/models'
import { Viewer, SignType, WidgetMenuItem } from '@/types'
import isDateSignSettable from './isDateSignSettable'
import { PopoverType } from '@/components/contract/useWidgetPopover'
import WidgetBase from '@/components/widget-base/WidgetBase.vue'
import SignImg from '@/components/sign-img/SignImg.vue'
import WidgetPlaceholder from '@/components/widget-base/WidgetPlaceholder.vue'

/** 签署控件 */
export default defineComponent({
  name: 'WidgetDateSign',

  components: { WidgetBase, SignImg, WidgetPlaceholder },

  props: {
    /** 控件数据 */
    data: {
      type: Widget,
      required: true
    }
  },

  setup(props, { emit }) {
    /** 合同控件 */
    const viewer = inject('Viewer') as Viewer

    /** 根组件 */
    const root = ref(null as InstanceType<typeof WidgetBase> | null)

    /** 根节点 */
    const el = computed(() => root.value?.$el as HTMLElement | null)

    /** 签章配置 */
    const options = computed(() => viewer.signOptions)

    return {
      /** 根组件 */
      root,

      /** 签章配置 */
      options,

      /** 签章类型 */
      type: SignType.DATE,

      /** 菜单 */
      menu: computed(() => {
        const widget = props.data

        return [
          {
            text: '批量应用',
            enable: widget.batchable,
            handler: () => viewer.$emit('popover-open', PopoverType.BATCH_APPLY, el.value, widget)
          },
          {
            text: '日期设置',
            enable: widget.isUse && isDateSignSettable(options.value, widget),
            handler: () => viewer.$emit('popover-open', PopoverType.DATE_SIGN_SET, el.value, props.data)
          }
        ] as WidgetMenuItem[]
      })
    }
  }
})
</script>

<style lang="scss">
// 签署日期
.fa-widget-date-sign {
  &__img {
    height: 100%;

    &-box {
      width: 100%;
      height: 100%;
      overflow: hidden;
    }

    .fa-sign-img__target {
      opacity: 0.9;
    }
  }

  .fa-widget-toolbar {
    height: 100%;
    box-shadow: none;

    &__btn {
      line-height: 28px;
    }
  }
}
</style>
